<template>
  <div class="app-container">
    <span style="font-size: medium;color: rgba(151,170,195) "> / 采购订单 / 订单详情</span>

    <el-row style="margin-top: 20px">
      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><CollectionTag style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">基本信息</span></template>
          <el-descriptions
              :column="3"
              :size="'large'"
              border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  订单编号
                </div>
              </template>
              {{ orderData.orderNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  操作人
                </div>
              </template>
              {{ orderData.operator }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <timer />
                  </el-icon>
                  下单时间
                </div>
              </template>
              {{ orderData.orderTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  负责人
                </div>
              </template>
              {{orderData.responsiblePerson}}
            </el-descriptions-item>
            <el-descriptions-item span="1">
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <iphone />
                  </el-icon>
                  联系电话
                </div>
              </template>
              {{orderData.contactPhone}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <location />
                  </el-icon>
                  收货地址
                </div>
              </template>
              {{orderData.deliveryAddress}}
            </el-descriptions-item>
            <el-descriptions-item span="1">
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <coin />
                  </el-icon>
                  订单状态
                </div>
              </template>
              <el-tag size="large">{{ orderData.orderStatus }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  最后修改人
                </div>
              </template>
              {{orderData.modifiedBy}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <timer />
                  </el-icon>
                  最后修改时间
                </div>
              </template>
              {{parseTime(orderData.modifiedDate,'{y}-{m}-{d} {h}:{i}:{s}')}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <data-board />
                  </el-icon>
                  备注
                </div>
              </template>
              {{orderData.remarks}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><Goods style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">货品信息</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table v-loading="loading" :data="showProductForm">
              <el-table-column label="采购明细编号" align="center" prop="orderDetailNo"/>
              <el-table-column label="货品批号" align="center" prop="rawProductBatch"/>
              <el-table-column label="货品名称" align="center" prop="rawProductName"/>
              <el-table-column label="货品图片" align="center" prop="picture">
                <template #default="scope">
                  <image-preview :src="scope.row.picture" :width="50" :height="50"/>
                </template>
              </el-table-column>
              <el-table-column label="货品单价(元/吨)" align="center" prop="unitPrice" />
              <el-table-column label="订购数量(吨)" align="center" prop="quantity"/>
              <el-table-column label="预期送达时间" align="center" prop="expectedDeliveryTime"/>
            </el-table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><Flag style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">变更历史</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table v-loading="loading" :data="changeDetails">
              <el-table-column label="变更人" align="center" prop="changePerson"/>
              <el-table-column label="变更人角色" align="center" prop="identity"/>
              <el-table-column label="变更时间" align="center" prop="changeTime"/>
              <el-table-column label="变更内容" align="left" header-align="center" prop="unitPrice" width="450">
                <template #default="scope">
                  <el-scrollbar max-height="80px">
                    <div v-for="(activity, activityIndex) in scope.row.changeDetail" :key="activityIndex">
                      <p style="display: inline-block;white-space: nowrap" ><strong>{{ activity.field }}：</strong></p>
                      <p v-html="highlightText(activity.detail)" style="display: inline-block;white-space: nowrap"></p>
                    </div>
                  </el-scrollbar>
                </template>
              </el-table-column>
              <el-table-column label="变更状态" align="center" prop="status">
                <template #default="scope">
                  <el-tag size="large">{{ scope.row.status }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 货品详情 -->
    <el-dialog title="货品详情" v-model="open" width="700px" style="height: 620px" append-to-body>
      <el-scrollbar height="450">
        <el-form :model="form" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="货品批号：">{{form.rawProductBatch}}</el-form-item>
              <el-form-item label="供货商名称：">{{form.companyName}}</el-form-item>
              <el-form-item label="保质期：">{{form.shelfLife}} (天)</el-form-item>
              <el-form-item label="原产地：">{{form.origin}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="货品名称：">{{form.name}}</el-form-item>
              <el-form-item label="货品种类：">{{form.goodsCategory}}</el-form-item>
              <el-form-item label="温度要求：">{{form.storageTemperature}}</el-form-item>
              <el-form-item label="库存量：">{{form.stockQuantity}} ({{form.stockUnit}})</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="货品图片：" showTip="false">
                <el-image :src="form.picture" style="width: 150px; height: 150px;" fit="cover"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="货品描述：">{{form.description}}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="货品规格：">{{form.specification}}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="价格信息：">{{form.priceInformation}}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">{{form.remarks}}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false" type="primary">关 闭</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup name="OrderDetail">
import {ref} from "vue";
import {getPurchaseOrder} from '@/api/purchase/purchaseOrder.js'
import {parseTime} from "@/utils/ruoyi.js";
import {CollectionTag, DataBoard, Document, Iphone, Location, Tickets, Timer} from "@element-plus/icons-vue";
import {getOrderDetail} from "@/api/purchase/orderDetail.js";
import {getDetail} from "@/api/purchase/changeDetail.js";
import {useRoute} from "vue-router";

const { proxy } = getCurrentInstance();
const route = useRoute();

const orderNo = ref(0);
const orderData = ref({});
const showProductForm = ref([]);
const changeDetails = ref([]);
const loading = ref(false);
const open = ref(false);
const form = ref({});

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap['large'] || marginMap.default,
  }
})

function initial(){
  if(route.params){
    orderNo.value = route.params.orderNo;
    getPurchaseOrder(orderNo.value).then(response => {
      orderData.value = response.data;
    })
  }
  loading.value = true;
  getOrderDetail(orderNo.value).then(response => {
    showProductForm.value = response.data;
    loading.value = false;
  })
  loading.value = true;
  getDetail(orderNo.value).then(response => {
    changeDetails.value = response.data;
    for (let i = 0; i < changeDetails.value.length; i++) {
      changeDetails.value[i].changeDetail =
          JSON.parse(changeDetails.value[i].changeDetail);
    }
    loading.value = false;
  })
}

function convertChangeDetail(changeDetail){
  let result = '';
  changeDetail.forEach(item => {
    result += item.field + ': ' + item.detail + '; ';
  })
  return result;
}

function highlightText(input) {
  return input.replace(/\b(\S+?)\b/g, match => {
    if (match === "修改为") {
      return match;
    }
    return `<span style="color: rebeccapurple; font-weight: bold;">${match}</span>`;
  });
}

initial();
</script>

<style scoped lang="scss">
.cell-item {
  display: flex;
  align-items: center;
}
</style>